<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 150px;
				height: 150px;
				background: deepskyblue;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
	window.onload = function(){
		var aDiv = document.getElementById("div1");
		document.onkeydown = function(ev){
			var e = ev || window.event;
			var kCode = e.keyCode;
			switch (kCode){
                 case 37:
                     aDiv.style.left = aDiv.offsetLeft-20+'px';
                     break;
                 case 38:
                    aDiv.style.top = aDiv.offsetTop-20+'px';
                     break;
                 case 39:
                     aDiv.style.left = aDiv.offsetLeft+20+'px';
                     break;
                 case 40:
                     aDiv.style.top = aDiv.offsetTop+20+'px';
                     break;
                 default:
		                alert('请重新输入');
             }
         }
    }


    // var aDiv = document.getElementById("div1");
    // window.onload = function(){
    // 	document.onkeydown = function(ev){
    // 		var e = ev || window.event;
    // 		var x=0;
    // 		var y=0;
    // 		var kCode = e.keyCode;
    // 		switch(kCode){
    // 			case 37:
    // 			x=x-10;
    // 			break;
    // 			case 38:
    // 			y=y-10;
    // 			break;
    // 			case 39:
    // 			x=x+10;
    // 			break;
    // 			case 40:
    // 			y=y+10;
    // 			break;
    // 			default:
    // 			alert('重新输入');
    // 		}
    // 		aDiv.style.left = x+'px';
    // 		aDiv.style.top = y+'px';
    // 	}
    // }
	</script>
</html>
